<template>
  <el-dialog
    class="basic-dialog"
    :visible="visible"
    :title="'提示'"
    :width="'30%'"
    :modal="true"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :fullscreen="false"
    :append-to-body="true"
    :show-close="true"
    @close="handleClose"
  >
    <div class="form-container">
      <div style="text-align: center">
        <div class="el-row">
          <i class="el-icon-success" style="color:green;font-size: 40px"></i>
        </div>
        <div class="el-row" style="line-height: 50px">
          <h4>生成采购订单成功</h4>
        </div>
        <div class="el-row" v-for="(item, index) in purchaseOrderNoList" :key="index">
          订单号：{{item}} <a :data-clipboard-text="item" class="iconfont icon-copy">复制</a>
        </div>
      </div>
    </div>
    <div slot="footer" style="text-align: center">
      <slot name="ft" >
        <el-button type="primary"  @click="handleClose">关闭</el-button>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
import { mapState } from 'vuex';
import Clipboard from 'clipboard';

export default {
  name: 'pushDownSuccessDialog',
  props: {
    dialogVisible: {
      type: Boolean,
    },
    purchaseOrderNo: {
      type: String
    }
  },
  data () {
    return {
      checkForm: {
        pushOaRemark: '',
        needPushOa: 1
      },
      formValidate: {
        pushOaRemark: [
          { required: true, message: '审批原因不能为空', trigger: 'change' },
        ],
      },
    };
  },
  computed: {
    ...mapState({
      pushDownLoading: (state) => state.sourcing.purchaseInquiry.pushDownLoading,
    }),
    visible () {
      return this.dialogVisible;
    },
    purchaseOrderNoList () {
      if (!this.purchaseOrderNo) {
        return []
      }
      return this.purchaseOrderNo.split(',')
    }
  },
  mounted () {
    const clipboard = new Clipboard('.icon-copy');
    clipboard.on('success', e => {
      this.$message.success('已复制到剪贴板！');
    });
  },
  methods: {
    handleClose () {
      this.$emit('hide-handler');
    },
  },
};
</script>
<style lang="less">
.form-container {
  .supplier-info {
    margin-bottom: 10px;
  }
}
</style>
